<template>
  <div class="root">
    <a-select v-model="provinceName" style="width: 200px; margin-right:30px;" placeholder="please select your zone">
      <a-select-option value="广东省">
        广东省
      </a-select-option>
      <a-select-option value="山东省">
        山东省
      </a-select-option>
      <a-select-option value="新疆维吾尔自治区">
        新疆维吾尔自治区
      </a-select-option>
      <a-select-option value="宁夏回族自治区">
        宁夏回族自治区
      </a-select-option>
      <a-select-option value="四川省">
        四川省
      </a-select-option>
      <a-select-option value="陕西省">
        陕西省
      </a-select-option>
      <a-select-option value="湖南省">
        湖南省
      </a-select-option>
      <a-select-option value="甘肃省">
        甘肃省
      </a-select-option>
      <a-select-option value="青海省">
        青海省
      </a-select-option>
      <a-select-option value="北京市">
        北京市
      </a-select-option>
      <a-select-option value="河南省">
        河南省
      </a-select-option>
      <a-select-option value="山西省">
        山西省
      </a-select-option>
      <a-select-option value="云南省">
        云南省
      </a-select-option>
      <a-select-option value="内蒙古自治区">
        内蒙古自治区
      </a-select-option>
      <a-select-option value="黑龙江省">
        黑龙江省
      </a-select-option>
      <a-select-option value="河北省">
        河北省
      </a-select-option>
      <a-select-option value="福建省">
        福建省
      </a-select-option>
      <a-select-option value="浙江省">
        浙江省
      </a-select-option>
      <a-select-option value="江苏省">
        江苏省
      </a-select-option>
      <a-select-option value="辽宁省">
        辽宁省
      </a-select-option>
      <a-select-option value="贵州省">
        贵州省
      </a-select-option>
      <a-select-option value="上海市">
        上海市
      </a-select-option>
      <a-select-option value="湖北省">
        湖北省
      </a-select-option>
      <a-select-option value="吉林省">
        吉林省
      </a-select-option>
      <a-select-option value="广西壮族自治区">
        广西壮族自治区
      </a-select-option>
      <a-select-option value="安徽省">
        安徽省
      </a-select-option>
      <a-select-option value="西藏自治区">
        西藏自治区
      </a-select-option>
      <a-select-option value="江西省">
        江西省
      </a-select-option>
    </a-select>
    <a-date-picker style="margin-right:30px;" @change="setDate" />
    <a-button type="primary" @click="submit">
      查询
    </a-button>
    <div class="row1">
      <div class="chart1" ref="chart1"></div>
      <div class="chart2" ref="chart2"></div>
    </div>
    <div class="row2">
      <div class="chart3" ref="chart3"></div>
      <div class="chart4" ref="chart4"></div>
    </div>
  </div>
</template>

<script>
//import * as echarts from "echarts";
import echarts from 'echarts';
import axios from 'axios'
import { getCityData } from '@/api/chart/city'
export default {
  data() {
    return {
      provinceName: '',
      date: '',
      cityName: [],
      area: [],
      population: [],
      current: [],
      map: [],
    }
  },
  mounted() {

  },
  methods: {
    setDate(date, dateString) {
      this.date = dateString;
    },
    submit() {
      console.log(this.date)
      console.log(this.name)
      getCityData(this.provinceName, this.date).then(res => {
        console.log("res", res);
        this.area = res.area;
        this.population = res.population;
        this.name = res.name;
        this.current = res.current;
        for (let i = 0; i < this.name.length; i++) {
          this.map.push({
            name: this.name[i],
            value: this.current[i]
          })
        }
        this.showCountByArea();
        this.showCountByPopulation();
        this.showCurrent();
        this.showMap();
      })
    },
    showCountByArea() {
      let myEchart2 = echarts.init(this.$refs.chart2);
      let option = {
        title: {
          text: '感染按面积密度排名(感染数/每亿平方米)'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.name,
          axisLabel: {//坐标轴刻度标签的相关设置。
            formatter: function (value) {
              return value.split("").join("\n");
            }
          },
        },
        yAxis: {
          type: 'value'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {},
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
          }
        ],
        series: [
          {
            name: 'city',
            color: '#4B0082',
            data: this.area,
            type: 'bar',
          }
        ]
      };
      myEchart2.setOption(option);
    },
    showCountByPopulation() {
      let myEchart3 = echarts.init(this.$refs.chart3);
      let option = {
        title: {
          text: '感染按人口密度排名(感染数/每万人)'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.name,
          axisLabel: {//坐标轴刻度标签的相关设置。
            formatter: function (value) {
              return value.split("").join("\n");
            }
          },
        },
        yAxis: {
          type: 'value'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {},
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
          }
        ],
        series: [
          {
            name: 'city',
            data: this.population,
            type: 'bar',
          }
        ]
      };
      myEchart3.setOption(option);
    },
    showCurrent() {
      let myEchart4 = echarts.init(this.$refs.chart4);
      let option = {
        title: {
          text: '感染病患总数'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.name,
          axisLabel: {//坐标轴刻度标签的相关设置。
            formatter: function (value) {
              return value.split("").join("\n");
            }
          },
        },
        yAxis: {
          type: 'value'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {},
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
          }
        ],
        series: [
          {
            name: 'city',
            color: '#DC143C',
            data: this.current,
            type: 'bar',
          }
        ]
      };
      myEchart4.setOption(option);
    },
    async showMap() {
      let s = `json/${this.provinceName}.json`
      console.log(this.map)
      let { data } = await axios.get(`json/${this.provinceName}.json`)
      echarts.registerMap(this.provinceName, data)
      var myEchart1 = echarts.init(this.$refs.chart1)
      let option = {
        tooltip: {
		        //trigger: 'item',  formatter: '{b}:{c}'
	        	enterable:true,
	        	trigger:'item',
	        	formatter:function(p){
	        		let s = p.data.name + ":" + p.data.value;
	        		return s;
	        	}
		    },
        visualMap: {
          min: 0,
          max: 1500,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: [
              '#313695',
              '#4575b4',
              '#74add1',
              '#abd9e9',
              '#e0f3f8',
              '#ffffbf',
              '#fee090',
              '#fdae61',
              '#f46d43',
              '#d73027',
              '#a50026'
            ]
          },
        },
        series: [
          {
            name: '',
            type: 'map',
            map: this.provinceName,
            data: this.map,
          }
        ]
      };
      myEchart1.setOption(option);
      return;
    }
  }
}


</script>

<style lang="less" scoped>
.row1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 300px;
}

.row1 .chart1 {
  width: 45%;
  flex: 1;
}

.row1 .chart2 {
  width: 45%;
  flex: 1;
}

.row2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 300px;
}

.row2 .chart3 {
  width: 45%;
  flex: 1;
}

.row2 .chart4 {
  width: 45%;
  flex: 1;
}
</style>